<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/form.css">
    <link rel="stylesheet" href="../css/common.css">
</head>

<body>
    <h1>用户注册</h1>
    <form action="https://www.baidu.com" method="post" enctype="multipart/form-data" class="register">
        <!-- 用户名 -->
        <div>
            <label for="userName">用户名</label>
            <input placeholder="输入用户名" type="text" name="userName" class="userName" id="userName" />
            <span>*</span>
        </div>
        <input type="hidden" name="id" value="1" />
        <!-- 密码 -->
        <div>
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="password" placeholder="输入密码" />
            <span>*</span>
        </div>
        <div>
            <label for="realName">真实姓名</label>
            <input placeholder="输入用户名" type="text" name="realName" class="realName" id="realName" />
            <span>*</span>
        </div>
        <!-- 性别单选框 -->
        <div>
            <label>性别</label>
            <input type="radio" name="gender" class="gender" value="男" checked />男
            <input type="radio" name="gender" class="gender" value="女" />女
            <span> </span>
        </div>
        <!-- 爱好复选框 -->
        <div>
            <label>爱好</label>
            <input type="checkbox" name="hobby" value="LOL" />LOL
            <input type="checkbox" name="hobby" value="王者" checked />王者
            <input type="checkbox" name="hobby" value="吃鸡" />吃鸡
            <input type="checkbox" name="hobby" value="飞车" />飞车
            <span id="afterHobby">*</span>
        </div>
        <!-- 生日 -->
        <div>
            <label for="birthday">生日</label>
            <input type="datetime-local" id="birthday" class="birthday" name="birthday" />
            <span>*</span>
        </div>
        <!-- 身份证 -->
        <div>
            <label for="identityNo">身份证号</label>
            <input type="text" id="identityNo" class="identityNo" name="identityNo" placeholder="输入身份证" />
            <span>*</span>
        </div>
        <!-- 电话 -->
        <div>
            <label for="phone">电话</label>
            <input type="tel" id="phone" name="phone" class="phone" placeholder="输入电话" />
            <span>*</span>
        </div>
        <!-- 邮箱 -->
        <div>
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" class="email" placeholder="输入邮箱" />
            <span>*</span>
        </div>
        <!-- 个人评价 -->
        <div class="resume">
            <label for="resume">个人评价</label>
            <textarea id="resume" cols="20" rows="10" style="vertical-align: middle;"></textarea>
            <span>*</span>
        </div>
        <!-- 城市 -->
        <div>
            <label>所属城市</label>
            <select id="province" name="province">
                <option value="ah">安徽</option>
                <option value="zj">浙江</option>
                <option value="js" selected>江苏</option>
                <option value="jx">江西</option>
            </select>
            省
            <select id="city" name="city">
                <option value="hf">合肥</option>
                <option value="hz">杭州</option>
                <option value="nj" selected>南京</option>
                <option value="nc">南昌</option>
            </select>
            市
            <select id="district" name="district">
                <option value="bh">滨湖</option>
                <option value="xh">西湖</option>
                <option value="jy" selected>建邺</option>
                <option value="lcq">老城</option>
            </select>
            区
        </div>
        <!-- 验证码 -->
        <div class="code-div">
            <label for="random">验证码</label>
            <!-- 随机验证码图片容器 -->
            <div id="random" class="random"></div>
            <input id="reRandom" type="text" class="reRandom" name="reRandom" />
            <span>*</span>
        </div>
        <!-- 头像 -->
        <div>
            <label for="pic">头像</label>
            <input id="pic" type="file" name="pic" />
            <span>*</span>
        </div>
        <!-- 提交和重置 -->
        <div>
            <label> </label>
            <input type="submit" value="Submit" />
            <input type="reset" value="Reset" />
        </div>
    </form>
</body>
<script src="../js/gVerify.js"></script>
<script src="../js/vailidate.js"></script>


</html>